<template>
  <div class="answersThreeMeetLesson">
    <div>
      <h3><span class="red-line"></span>三会一课</h3>
    </div>
    <div>
      <template v-if="$store.state.datePickerShow">
        <van-popup v-model="calendarSelectorShow" >
          <van-datetime-picker
            ref="datePicker"
            type="date"
            v-model="defaultDate"
            visible-item-count="3"
            @confirm="dateTrue"
            @cancel="clearSelector"
            cancel-button-text="清除"
          >
          </van-datetime-picker>
        </van-popup>
      </template>
    </div>

    <div class="div_background">
      <table class="threeMeetLesson">
        <caption>三会一课条件选择框</caption>
        <tr>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
        <tr>
          <td><span class="red-span">*</span>关键词</td>
          <td>
            <van-field v-model="meetingName" placeholder="多个请用空格隔开" />
          </td>
        </tr>
        <tr>
          <td><span class="red-span">*</span><span>开始日期：&nbsp;&nbsp;</span></td>
          <td>
            <van-field v-model="meetingStartTime" @click="showDateSelect('sanKeStartDate', meetingStartTime)" placeholder="请选择日期" readonly />
          </td>
        </tr>
        <tr>
          <td><span>结束日期：&nbsp;&nbsp;</span></td>
          <td>
            <van-field v-model="meetingEndTime" @click="showDateSelect('sanKeEndDate', meetingEndTime)" placeholder="请选择日期" readonly />
          </td>
        </tr>
        <tr>
          <td>查询范围</td>
          <td>
            <select ref="company">
              <option value="">全部</option>
              <option v-for="item in companyListData.data" :key="item.orgShortName" :value="item.orgShortName">{{item.orgShortName}}</option>
            </select>
          </td>
        </tr>
      </table>
      <div class="div_btn">
        <button class="btn_download" @click="fileDownload">开始巡检</button>
      </div>
    </div>
  </div>
</template>

<script>
import API from "@/api/api-chat-list";
import {isEmpty} from "@/common/util";
import Cookie from "@/utils/cookie";
import qs from "qs";
import dayjs from "dayjs";
import AesGcm from "@/utils/aesgcm";
export const PROVINCE_COMPANY_NAME = "省公司"
export const INTERVAL_YEAR = 10; // 日历年份最大年份和最小年份的取值间隔
export const CURRENT_DATE = dayjs(); // 初始化日期
export const START_DATE_SELECTOR = 'sanKeStartDate';
export const END_DATE_SELECTOR = 'sanKeEndDate';

export default {
  name: "AnswersThreeMeetLesson",
  data(){
    return{

      companyListData: {},

      companyName: '', // 公司名称
      meetingStartTime: this.$store.state.sanKeStartDate, // 开始时间
      meetingEndTime: this.$store.state.sanKeEndDate, // 结束时间
      meetingName: '',
      url: '',
      calendarMinDate: CURRENT_DATE.subtract(INTERVAL_YEAR,'year').startOf('year').startOf('month').toDate(),  // 日历最小时间
      calendarMaxDate: CURRENT_DATE.add(INTERVAL_YEAR,'year').endOf('year').endOf('month').toDate(),  //  日历最大时间
      defaultDate: new Date(),
      selectorDate: dayjs().format('YYYY-MM-DD'), // 日期选择器选中的时间
      dateType: null,
      calendarSelectorShow: false
    }
  },
  methods: {
    // 组织列表查询
    async getCompanyList() {
      const param = {
        type: 'query',
        queryText: '三会一课'
      }
      this.companyListData = await API.getCompanyList(param);
    },
    // 查询到的文件下载
    async fileDownload() {
      if(isEmpty(this.meetingName)){
        this.$toast.fail("关键词不能为空");
        return null;
      }
      if(isEmpty(this.meetingStartTime)){
        this.$toast.fail("开始日期不能为空");
        return null;
      }
      const param =qs.stringify({
        companyName: this.$refs.company.value,
        meetingStartTime: this.meetingStartTime,
        meetingEndTime: this.meetingEndTime,
        meetingName: this.meetingName,
        isDiscuss: 'false',
        token: Cookie.getCookie('aitalk_token_zh') || '',
        timestamp: dayjs().valueOf()
      });

      this.url = AesGcm.decrypt(process.env.VUE_APP_INTERFACE_URL) + '/sanKe/downloadGet?' + param;
      MXCommon.download(this.url);

    },
    async showDateSelect(type, date) {
      this.defaultDate = date ? new Date(date) : new Date();
      this.dateType = type;
      this.calendarSelectorShow = true;
      this.$store.state.datePickerShow =true;
    },
    onConfirm(day) {
      this.selectorDate = dayjs(day).format('YYYY-MM-DD');
    },
    dateTrue(day) {
      this.onConfirm(day)

      switch (this.dateType) {
        case START_DATE_SELECTOR:
          this.meetingStartTime = this.selectorDate;
          break;
        case END_DATE_SELECTOR:
          this.meetingEndTime = this.selectorDate;
          break;
        default:
          break;
      }

      this.calendarSelectorShow = false;
    },
    closeSelector() {
      this.calendarSelectorShow = false;
    },
    clearSelector() {
      switch (this.dateType) {
        case START_DATE_SELECTOR:
          this.meetingStartTime = null;
          break;
        case END_DATE_SELECTOR:
          this.meetingEndTime = null;
          break;
        default:
          break;
      }
      this.calendarSelectorShow = false;
    }
  },
  async created() {
    this.$store.state.sanKeStartDate = null;
    this.$store.state.sanKeEndDate = null;

    if (this.$store.state.userInfo.companyName === PROVINCE_COMPANY_NAME) {
      await this.getCompanyList();
    }else {
      this.companyListData = {
        data: [
          {
            'orgShortName': this.$store.state.userInfo.companyName
          }
        ]
      };
    }
  },

}
</script>

<style type="text/css">
.threeMeetLesson tr:first-of-type, .threeMeetLesson caption {
  display: none;
}

.threeMeetLesson tr td:first-of-type{
  width: 35%;
}
.answersThreeMeetLesson .red-span {
  color: red;
}

.answersThreeMeetLesson .div_background {
  border-radius: 10px;
  padding: 10px 5px;
}

.threeMeetLesson td {
  padding: 5px 0;
  font-size: 14px;
}

.answersThreeMeetLesson h3 {
  text-align: left;
  color: red;
  font-size: 1.2em;
}

.answersThreeMeetLesson h3 .red-line {
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #ff0000;
  margin-right: 12px;
  margin-top: 10px;
  border-radius: 5px;
}

.answersThreeMeetLesson .van-cell{
  padding: 0;
}

.answersThreeMeetLesson input[type=text]{
  border-radius: 3px;
  padding: 3px 6px;
  width: 170px;
  border: 1px solid #e8e8e8;
}

.answersThreeMeetLesson input[type=date]{
  border-radius: 3px;
  padding: 3px 6px;
  width: 170px;
  border: 1px solid #e8e8e8;
}

.answersThreeMeetLesson select {
  border-radius: 3px;
  padding: 3px 6px;
  width: 170px;
  height: 34px;
  color: black;
  border: 1px solid #e8e8e8;
  background-color: white;
}

.answersThreeMeetLesson .div_btn {
  text-align: center;
  padding: 10px 0;
}

.answersThreeMeetLesson .div_btn .btn_download {
  background-color: white;
  border-radius: 5px;
  border: 1px solid #ED2439;
  padding: 5px 10px;
  color: #ED2439;
  font-size: 1em;
}

.answersThreeMeetLesson .van-popup {
  width: 75%;
  position: absolute;
  left: 42%;
  border-radius: 10px;
  top: 138px;
}

.answersThreeMeetLesson .van-overlay {
  width: 124%;
  height: 450%;
  position: absolute;
  top: -178%;
  left: -21%;
}

.answersThreeMeetLesson .van-datetime-picker {
  height: 178px;
  border-radius: 10px;
}

.answersThreeMeetLesson .van-picker__toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  justify-content: space-around;
}

.answersThreeMeetLesson .van-picker__toolbar .van-picker__cancel,.answersThreeMeetLesson .van-picker__toolbar  .van-picker__confirm {
  border-radius: 15px;
  height: 70%;
}

.answersThreeMeetLesson .van-picker__toolbar  .van-picker__confirm {
  border: 1px solid #ED2439;
  color: #ED2439;
}

.answersThreeMeetLesson .van-picker__toolbar .van-picker__cancel {
  border: 1px solid gray;
  color: gray;
}

</style>

